<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>组件化</title>
</head>

<body>

    <div id="app">
       <xushu :num="numxx"></xushu>
        <app-xushu></app-xushu>
    </div>
<hr>

    <div id="app2">
        <xushu :num="numxx"></xushu>
    </div>
 
    <script src="../node_modules/vue/dist/vue.js"></script>


    <script>
       // 1.全局組件： 在所有的Vue实例中使用
       /*
            1.1 命名：不要使用驼峰命名, 可以使用中划线的方式命名
            1.2 模板： 必须的
            1.3 数据：一定要函数的方式声明
       */
        Vue.component("xushu",{
            template: ` <div @click='num++'>{{num}}</div>`,
            // data() {
            //     return {
            //         num:10
            //     }
            // },
            props:["num"]
        })


       // 2.局部组件 
        const appXushu={
                    template: ` <div @click='num++'>{{num}}</div>`,
                    data() {
                        return {
                            num:66
                        }
                    },
                }

        new Vue({
            el: "#app",
             data: {
                 numxx: 50
             },
             components:{
                 "app-xushu":appXushu
             }
        })

        new Vue({
            el: "#app2",
             data: {
                 numxx: 100
             }
        })
    </script>
</body>

</html>